import React from "react";
import { useNavigate } from "react-router-dom";
import { Tabs, Button, Cell, Image } from "react-vant";
import { useAppSelector } from "../../app/hooks";
const Index: React.FC = () => {
  const token = useAppSelector((state) => state.user.userInfo.token);
  const aboutList = useAppSelector((state) => state.user.userInfo.aboutList);
  const navigate = useNavigate();

  return (
    <div>
      <Tabs>
        <Tabs.TabPane title="全部标签">全部</Tabs.TabPane>
        <Tabs.TabPane title="关注标签">
          {token ? (
            <div>
              {aboutList.map((v) => {
                return (
                  <Cell
                    icon={<Image lazyload width={44} height={44} src={v.image} round />}
                    title={v.title}
                    value={
                      <Button type="primary" round>
                        已关注
                      </Button>
                    }
                  ></Cell>
                );
              })}
            </div>
          ) : (
            <div>
              <Button type="primary" onClick={() => navigate("/login")}>
                还没有登录, 点我去登录吧
              </Button>
            </div>
          )}
        </Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default Index;
